<template>
  <el-dialog
    title="分配权限"
    :visible.sync="menuVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @click="handleCancel"
  >
    <el-tree
      :data="menuTree"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      ref="tree"
    >
    </el-tree>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleAssignMenu">确 定</el-button>
    </div>
  </el-dialog>
</template>
  
  <script>
// import { assignRoleApi } from "@/Api/UserApi";
import { assignMenuApi } from "@/Api/RoleApi";
import { treeMenusApi, currentRoleMenusApi } from "@/Api/MenuApi";
export default {
  props: ["menuVisible"],
  data() {
    return {
      formLabelWidth: "120px",
      menuTree: [], //树形菜单
      defaultProps: {
        children: "children",
        label: "label",
      },
      roleId: "",
    };
  },
  mounted() {
    this.loadMenuTrees();
  },
  methods: {
    handleCancel() {
      this.$emit("closeAddDialog");
    },
    //
    async handleAssignMenu() {
      // const menuIds01 = this.$refs.tree.getCheckedKeys();
      // const menuIds02 = this.$refs.tree.getHalfCheckedKeys();
      // const menuIds = [...menuIds01, ...menuIds02];
      // console.log(menuIds);
      const menuIds = this.$refs.tree.getCheckedKeys();

      //分配权限
      try {
        const data = {
          roleId: this.roleId,
          menuIds: menuIds,
        };

        const res = await assignMenuApi(data);
        console.log(res);

        if (res.status == 200) {
          this.$message({
            message: res.msg,
            type: "error",
            duration: 1000,
            onClose: () => {
              this.$emit("closeAddDialog", true);
            },
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            duration: 1000,
          });
        }
      } catch (error) {
        console.log(error);
        this.$message({
          message: "系统异常",
          type: "error",
          duration: 1000,
        });
      }
    },
    //
    async openDialog(roleId) {
      this.roleId = roleId;
      try {
        const res = await currentRoleMenusApi(roleId);
        if (res.status == 200) {
          const keys = res.data.map((item) => item.id);
          this.$refs.tree.setCheckedKeys(keys);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            duration: 1000,
          });
        }
      } catch (error) {
        console.log(error);
        this.$message({
          message: "系统异常",
          type: "error",
          duration: 1000,
        });
      }
    },

    //加载所有角色
    async loadMenuTrees(userId) {
      try {
        const res = await treeMenusApi();

        if (res.status == 200) {
          this.menuTree = res.data;
          console.log(this.menuTree);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            duration: 1000,
          });
        }
      } catch (error) {
        console.log(error);

        this.$message({
          message: "系统异常",
          type: "error",
          duration: 1000,
        });
      }
    },
  },
};
</script>
  
  <style lang="less" scoped>
</style>    